<template>
  <div id="job">
    <div class="bodyContent">
      <div class="contentDiv">
        <vxe-toolbar perfect>
          <template #buttons>
            <vxe-form :data="queryParams" ref="queryForm" :inline="true">
              <vxe-form-item title="场景选项" clearable>
                <vxe-input v-model="queryParams.title" placeholder="请输入场景名称" clearable style="width: 200px" />
              </vxe-form-item>
              <vxe-form-item>
                <vxe-button content="重置条件" type="text" class="button-blue" @click="resetQuery" icon="vxe-icon-refresh"></vxe-button>
                <vxe-button content="查询数据" type="text" class="button-blue" @click="handleQuery" icon="vxe-icon-search"></vxe-button>
              </vxe-form-item>
            </vxe-form>
          </template>
        </vxe-toolbar>

        <div class="tableBox">
          <vxe-table ref="tableRef" :data="jobList" class="mytable-scrollbar" border="inner" align="left" height="auto" :loading="tableLoading" :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }" resizable show-overflow keep-source>
            <vxe-column type="seq" width="30" title="#"></vxe-column>
            <vxe-column title="接口名称" field="interfaceName" />
            <vxe-column title="方法名称" field="methodName" />
            <vxe-column title="场景选项" field="title" />
            <vxe-column title="场景选项值" field="value" :show-overflow-tooltip="true" />
            <vxe-column title="操作" align="center">
              <template #default="{ row }">
                <vxe-button type="text" status="primary" icon="vxe-icon-edit" circle @click="handleUpdate(row)"> </vxe-button>
                <!-- <vxe-button type="text" status="danger" icon="vxe-icon-delete" circle @click="handleDelete(row)"> </vxe-button> -->
              </template>
            </vxe-column>
          </vxe-table>
        </div>
      </div>
      <vxe-modal class-name="animation-slide-right" v-model="moduleDialog1" title="修改场景选项值" width="50vw" height="40vh" show-zoom resize>
        <InterfaceMethValue ref="refInterfaceMethValue" @editMethValue="editMethValue" />
      </vxe-modal>
    </div>
  </div>
</template>

<script setup lang="ts">
// 引入组件区==========
import { getCurrentInstance, onMounted, reactive, ref, watch } from 'vue';
import Breadcrumb from '@/components/Breadcrumb.vue'; //面包屑
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import { CaretRight, View } from '@element-plus/icons-vue';
import { IsEmpty, formatDateTime } from '@/utils/common.ts';
import { Splitpanes, Pane } from 'splitpanes';
import { VXETable } from 'vxe-table';
import InterfaceMethValue from '@/views/interface/InterfaceMethValue.vue';


// 全局变量定义区 ==========
let { proxy }: any = getCurrentInstance();

const val1 = ref(); //选择任务名
const val2 = ref(); //选择任务名

let tableLoading = ref(true); //表格加载状态

let ids: any = reactive([]); //选中数组
let groupList = reactive([]);
let statusList = reactive([
  {
    value: 0,
    name: '启用'
  },
  {
    value: 1,
    name: '禁用'
  }
]);
let single = ref(true); //非单个禁用
let multiple = ref(true); //非多个禁用
let showSearch = ref(true); //显示搜索条件
// 定时任务表格数据
let jobList = reactive([]);
let title = ref(''); //弹出层标题
let open = ref(false); //是否显示弹出层
let openView = ref(false); //是否显示详细弹出层
let expression: UnwrapRef<string> = ref(''); //传入的表达式
let moduleDialog1 = ref(false);
let refInterfaceMethValue = ref('');
let queryParams = reactive({
  title: ''
}); //传入的表达式
// 表单参数
let form = reactive({
  id: '',
  title: '',
  jobGroup: '',
  invokeTarget: '',
  cronExpression: '',
  misfirePolicy: 1,
  concurrent: 1,
  status: 0,
  systemId: '',
  moduleId: '',
  requestType: '',
  url: ''
});
let searchForm = reactive({
  rptSearchValue: ''
});
let showLoading = ref(false); //刷新+表格加载
let jobTableList = reactive([]);
let props = defineProps({
  systemId: String,
  moduleId: String,
  moduleSystemName: String,
}) as any;

watch(
  () => props.systemId,
  (n, o) => {
    getList();
  },
  {
    deep: true,
    immediate: true
  }
);
watch(
  () => props.moduleId,
  (newval, oldvbal) => {
    getList();
  },
  {
    deep: true,
  }
);

let searchValue = ref('');
let formRef: any = ref(null); //弹框新增
let formRef2: any = ref(null); //弹框编辑 任务详细
let selectMainItemRow: any = reactive({});
const jobVsMainItemList = reactive([]);
const mainItemAllList = reactive([]);

/** 查询定时任务列表 */
function getList() {
  jobList.length = 0;
  tableLoading.value = true;
  const url = '/api/sys/sysInterfaceMethValue/findInterfaceMethValueListByModuleIdAndSystemId';
  proxy.$http
    .get(url, { params: { title: queryParams.title,  systemId: props.systemId, moduleId: props.moduleId } })
    .then((res: any) => {
      jobList.push(...res.data);
      tableLoading.value = false;
    })
    .catch((err) => {
      tableLoading.value = false;
      VxeMessage(err, VxeNotifyType.error);
    });
}
function handleUpdate(row) {
  moduleDialog1.value = true;
  proxy.$nextTick(() => {
    refInterfaceMethValue.value?.initPage(row)
  })

}

// 表单重置
function reset() {
  let $formEl = formRef.value as any;
  let $formEl2 = formRef2.value as any;
  if ($formEl) {
    $formEl.resetFields();
  }

  if ($formEl2) {
    $formEl2.resetFields();
  }

  form.id = '';
  form.jobName = '';
  form.jobGroup = '';
  form.invokeTarget = '';
  form.cronExpression = '';
  form.requestType = '';
  form.url = '';
  form.misfirePolicy = 1;
  form.concurrent = 1;
  form.status = 0;
}

/** 搜索按钮操作 */
function handleQuery() {
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  queryParams.title = '';
  handleQuery();
}
function editMethValue() {
  moduleDialog1.value = false;
  getList();
}
</script>
<style lang="scss" scoped>
#job {
  width: 100%;
  height: 100%;

  .bodyContent {
    height: calc(100% - 60px);

    .contentDiv {
      height: 100%;
      background-color: $base-white;

      // 附加按钮间距
      .button-blue,
      .button-red {
        margin: 5px 5px 5px 0;
      }

      .vxe-form {
        :deep(.vxe-form--item) {
          margin-right: 10px;
        }
      }

      .tableBox {
        height: calc(100% - 40px);
      }
    }
  }

  .leftTable {
    height: calc(100% - 30px);
  }

  :deep(.el-tabs) {
    height: 100%;
  }

  :deep(.el-tabs__content) {
    padding: 0;
    height: calc(100% - 40px);

    .el-tab-pane {
      height: 100%;
    }
  }
}
</style>

<style lang="scss">
.addEditTaskDialog {
  .el-form {
    .el-form-item {
      margin-bottom: 20px;
    }
  }

  .dialogFooter {
    float: right;

    .el-button {
      float: right;
      margin-left: 10px;
    }
  }
}

.taskLogDetailDialog {
  height: 300px;

  .el-dialog__body {
    padding: 10px;

    .dialogFooter {
      margin: 10px;

      .el-button {
        float: right;
      }
    }
  }
}
</style>
